<template>
	<!-- 	<view>
		<navbar name="报告对比"></navbar>
		<block v-for="(item,idx) in reportList" :key="idx">
		<view class="contrast-box" @tap="nav()">
			<view class="leftImage">
				<u-lazy-load border-radius="10" height="129" img-mode="aspectFill" image=""></u-lazy-load>
			</view>
			<view class="cen-vs">
				vs
			</view>
			<view class="r-image">
				<u-lazy-load border-radius="10" height="129" img-mode="aspectFill" image=""></u-lazy-load>
			</view>
			<view class="r-content">
				<view class="result" :style="item.type=='已完成'?'color:#000':''">
					{{item.type}}
				</view>
				提交时间：{{item.time}}
			</view>
		</view>
		</block>
		<view class="form-report">
			报告提交后需耐心等待三个工作日
		</view>
		<button class="defaultbtn" type="default">上传报告</button>
	</view> -->
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
		  <u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<view v-show="!loadingone">
			<navbar name="报告对比"></navbar>
			<view class="selectTheReport">
				<text class="uploading-pr">上传报告</text>
			</view>
			<view class="history">
				历史对比
			</view>
			<block v-for="(item,idx) in historyList" :key="idx">
				<view class="history-flex">
					<view class="contrast-icon">
					</view>
					<view class="contrast-con">
						<view class="thospital">
							{{item.thospital}}
						</view>
						<view class="bhospital">
							{{item.bhospital}}
						</view>
					</view>
					<view class="rtime">
						{{item.time}}
					</view>
				</view>
			</block>
			<!-- <view class="">
				
			</view> -->
		</view>
	</view>
</template>

<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"


	export default {
		components: {
			uLazyLoad,
			uLoading,

		},
		data() {
			return {
				loadingone:false,//懒加载
				historyList:[{
					thospital:'北京海淀医院',
					bhospital:'北京朝阳医院',
					time:'2021.03.29'
				},
				{
					thospital:'北京海淀医院',
					bhospital:'北京朝阳医院',
					time:'2021.03.29'
				},
				{
					thospital:'北京海淀医院',
					bhospital:'北京朝阳医院',
					time:'2021.03.29'
				}],
				// reportList:[{
				// 	type:'审核中',
				// 	time:'2021.03.29'
				// },
				// {
				// 	type:'审核中',
				// 	time:'2021.03.29'
				// },
				// {
				// 	type:'已完成',
				// 	time:'2021.03.29'
				// }],


			}
		},
		methods: {
			// nav(){
			// 	uni.navigateTo({
			// 		url:'/pagesMy/my/comparison/details'
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	.selectTheReport {
		width: 706upx;
		height: 171upx;
		background: #FFFFFF;
		border-radius: 25upx;
		margin: 30upx auto 0;
		text-align: center;
		line-height: 171upx;

		.uploading-pr {
			position: relative;
			padding-left: 44upx;
		}

		.uploading-pr:before {
			content: '';
			width: 44upx;
			height: 44upx;
			position: absolute;
			top: -4upx;
			left: -10upx;
			background: url(http://static.bsyjk.cn/addicon/0F46361D18614466A2185208E4386416.png)no-repeat;
			background-size: 44upx 44upx;

		}
	}

	.history {
		width: 706upx;
		height: 100upx;
		margin:0 auto;
		line-height: 110upx;
	}
	.history-flex{
		width: 706upx;
		height: 171upx;
		background: #FFFFFF;
		border-radius: 25upx;
		margin: 0 auto 30upx;
		display: flex;
		padding: 17upx 40upx;
		.contrast-icon{
			width: 54upx;
			height: 54upx;
			margin: 36upx 36upx 0 0;
			background: url(http://static.bsyjk.cn/contrastIcon/777C727023C74B3C8F72A37F7C357AE5.png)no-repeat;
			background-size: 54upx 54upx;
			
		}
		.contrast-con{
			width: 410upx;
			height: 100%;
			.thospital,.bhospital{
				min-width: 228upx;
				height: 60upx;
				display: inline-block;
				background: #F5A623;
				border-radius: 10upx;
				text-align: center;
				line-height: 60upx;
				font-size: 30upx;
				font-weight: 400;
				color: #333333;
				padding: 0 24upx;
			}
			.bhospital{
				background: #2EA7E0;
				margin-top:17upx;
			}
		}
		.rtime{
			width: 124upx;
			height: 33upx;
			font-size: 24upx;
			font-weight: 400;
			color: #333333;
			padding: 54upx 0;
			position: relative;
		}
		.rtime:before {
			content: '';
			position: absolute;
			top: 54upx;
			right: -30upx;
			width: 30upx;
			height: 30upx;
			background: url(https://bsyjk-pic.bsyjk.cn/arrows/1CB6DDEEB08E4CE0A40E8E86A99D1A0D.png)no-repeat;
			background-size: 30upx 30upx;
		}
	}
	// .defaultbtn{
	// 	width: 655upx;
	// 	height: 90upx;
	// 	background: linear-gradient(112deg, #81C042 0%, #2EA7E0 100%);
	// 	border-radius: 45upx;
	// 	font-size: 34upx;
	// 	font-weight: 400;
	// 	color: #FFFFFF;
	// 	line-height: 90upx;
	// 	position: fixed;
	// 	bottom: 40upx;
	// 	left: 50%;
	// 	transform: translateX(-50%);
	// }
	// .form-report{
	// 	height: 42upx;
	// 	font-size: 30upx;
	// 	font-weight: 500;
	// 	color: #9B9B9B;
	// 	line-height: 42upx;
	// 	padding: 55upx 0 0;
	// 	text-align: center;
	// }
	// .contrast-box {
	// 	width: 706upx;
	// 	height: 171upx;
	// 	margin: 30upx auto 0;
	// 	background: #FFFFFF;
	// 	border-radius: 25upx;
	// 	display: flex;
	// 	padding: 20upx 25upx;
	// 	position: relative;
	// 	.leftImage {
	// 		width: 129upx;
	// 		height: 129upx;
	// 	}

	// 	.cen-vs {
	// 		width: 70upx;
	// 		text-align: center;
	// 		color: #9B9B9B;
	// 		font-size: 40upx;
	// 		line-height: 121upx;
	// 	}

	// 	.r-image {
	// 		width: 129upx;
	// 		height: 129upx;
	// 	}

	// 	.r-content {
	// 		width: 320upx;
	// 		height: 171upx;
	// 		padding-left: 18upx;
	// 		font-size: 26upx;

	// 		.result {
	// 			font-weight: 500;
	// 			color: #F56767;
	// 			padding: 24upx 0 2upx;
	// 		}
	// 	}
	// }
	// .contrast-box:before {
	// 	content: '';
	// 	position: absolute;
	// 	top: 70upx;
	// 	right: 22upx;
	// 	width: 36upx;
	// 	height: 36upx;
	// 	background: url(https://bsyjk-pic.bsyjk.cn/arrows/1CB6DDEEB08E4CE0A40E8E86A99D1A0D.png)no-repeat;
	// 	background-size: 36upx 36upx;
	// }
</style>
